<template>
  <div class="xf-picker">
    <xf-input
      :placeholder="placeholder"
      readonly
      :value="nameVal"
      :showIcon="showIcon"
      :valid="valid"
      ref="input"
      :disabled="disabled"
      :show-clear-icon="false"
      @click.native="handleShow"></xf-input>
    <div class="picker-mask" v-show="show" @click="handleHide" @touchmove.stop.prevent>
      <div class="picker-con" @click.stop>
        <div class="picker-top">
          <span class="cancel" @click="handleHide">取消</span>
          <form @submit.prevent="search" class="search-form" v-if="search">
            <input type="search" placeholder="关键字检索" v-model.trim="keyword">
          </form>
          <span class="submit" @click="onSubmit">确定</span>
        </div>
        <mt-picker ref="picker" :slots="slots" @change="onValuesChange" value-key="name" v-if="slots.length && slots[0].values.length"></mt-picker>
        <div class="empty" v-else>暂无数据~</div>
      </div>
    </div>
  </div>
</template>
<script>
  import XfInput from '../xf-input/xf-input.vue'
  import {debounce} from '../../common/js/util'

  export default {
    props: {
      list: {
        type: null,
        default() {
          return []
        }
      },
      placeholder: {
        type: String,
        default: ''
      },
      value: {
        type: null,
        default: ''
      },
      showIcon: {
        type: Boolean,
        default: true
      },
      valid: {type: null},
      search: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    name: 'xf-picker',
    components: {XfInput},
    data() {
      return {
        show: false,
        slots: [],
        selected: {},
        nameVal: '',
        keyword: ''
      }
    },
    methods: {
      handleShow() {
        if (this.disabled) return
        this.show = true
        if (this.list.length && this.value) {
          const index = this.list.findIndex(item => String(item.value) === String(this.value))
          if (index !== -1) {
            this.$refs.picker.setSlotValue(0, this.list[index])
          }
        }
      },
      handleHide() {
        this.show = false
        this.keyword = ''
      },
      onSubmit() {
        this.handleHide()
        this.$emit('input', this.selected.value)
        this.$emit('update:text', this.selected.name)
      },
      onValuesChange(ref, values) {
        this.selected = values[0]
      },
      handleList(val) {
        this.slots = [{
          flex: 1,
          values: val,
          textAlign: 'center'
        }]
        this.handleValue()
      },
      handleValue() {
        setTimeout(() => {
          if (this.list.length && this.value) {
            const index = this.list.findIndex(item => String(item.value) === String(this.value))
            if (index !== -1) {
              this.nameVal = this.list[index].name
            } else {
              this.nameVal = ''
            }
          } else {
            this.nameVal = ''
          }
        }, 20)
      },
      validValue() {
        return this.$refs.input.validValue()
      }
    },
    created() {
      this.$watch('list', this.handleList)
      this.$watch('value', this.handleValue)
      this.handleList(this.list)
      this.$watch('keyword', debounce((n, o) => {
        let arr = []
        const reg = new RegExp(n, 'i')
        if (n) {
          this.list.forEach(item => {
            if (reg.test(item.name)) {
              arr.push(item)
            }
          })
        } else {
          arr = this.list
        }
        this.slots = [{
          flex: 1,
          values: arr,
          textAlign: 'center'
        }]
        setTimeout(() => {
          this.$refs.picker.setSlotValue(0, this.slots[0].values[0])
        })
      }, 300))
    }
  }
</script>
<style scoped lang="scss">
  @import "../../common/style/variable";
  @keyframes pickerSlider {
    0%{
      transform: translate(0,100%);
    }
    100%{
      transform: translate(0,0);
    }
  }
  .xf-picker{
    width: 100%;
    .picker-mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.3);
      z-index: 2003;
      .picker-con{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #fff;
        animation: pickerSlider .5s;
      }
    }
    .picker-top{
      border-bottom: 1px solid #d9d9d9;
      border-top: 1px solid #d9d9d9;
      background: #f2f2f2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        display: inline-block;
        padding: .2rem .2rem;
      }
      .cancel{
        color: #666;
      }
      .submit{
        color: $primary;
      }
    }
  }
  .empty{
    padding: .8rem;
    text-align: center;
  }
  .search-form {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 .3rem;
    input {
      outline: none;
      border: none;
      background: #fff;
      padding: .1rem .3rem;
      height: .6rem;
      border-radius: .3rem;
      width: 100%;
      &::-webkit-search-cancel-button {
        -webkit-appearance: none;
      }
    }
  }
</style>
